/* ============================================================================
   feed-side - the dashboard's Live Community Feed and My Activity sidebars
   (theme_includes/feed_side.php, drawn by enduser/lobby/live_feed.php).

   The cards, the lists and the two-column layout are the Townsquare's own
   rules (.tq-feed-lay / .tq-fmain / .tq-side / .tq-scard / .tq-mini in
   themes/townsquare/css/townsquare.css, the tokens in base.css's .tq-tokens),
   loaded as they are - nothing here repeats them. This file only:
     - takes the sidebar off .tq-tokens' dark page ground, as .tq-dash does
       for the master's Townsquare tab;
     - colours it with the portal's own accent;
     - draws a member's picture / initials (People to follow, New members,
       Recent comments) and a one-line item with no lead tile;
     - fits the backend feed's search box and cards to the feed column.
   ============================================================================ */
.tq-feed-side.tq-tokens {
  --tq-blue: var(--site_color_g);
  --tq-skin-blue: var(--site_color_g);
  background: none;
  color: var(--tq-navy);
  color-scheme: light;
  overflow: visible;
  font-size: 14px;
}
.tq-feed-side[hidden] { display: none !important; }
.tq-feed-side a,
.tq-feed-side a:hover { text-decoration: none; }
.tq-feed-side .tq-scard h4 { color: var(--tq-navy); }
.tq-feed-side .tq-mini .tq-d { color: var(--tq-navy); }

/* a member: picture, or initials on the accent */
.tq-mini .tq-pic {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--tq-blue, var(--site_color_g)) 14%, #fff);
  color: var(--tq-blue, var(--site_color_g));
  font: 800 14px var(--tq-body, inherit);
}
.tq-mini .tq-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* a list item with no lead tile (Your recent posts): the title on one line */
.tq-mini a.tq-solo { grid-template-columns: minmax(0, 1fr); }
.tq-mini a.tq-solo b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* the feed beside the sidebar: its search box starts on the sidebar's top line; two cards a row
   instead of three */
/* the feed and sidebar take the header's edges (.container); inside the dashboard's own container
   (the lobby tab) no second gutter */
.container .container.lf-wrap { padding-left: 0; padding-right: 0; }
.lf-feed-lay > .tq-fmain > .live-feed-search-wrap { margin-top: 0; }
/* the list-style post cards share the search box's left and right edges (no row gutter: a card is
   the full-width column itself) */
.lf-feed-lay #ajax_data > .row:has(> .list_style_posts) { margin-left: 0; margin-right: 0; }
/* the other tab's pill row is hidden; its scroll wrapper (backend-feed.js) must not keep its top margin */
.lf-feed-lay .bf-pills:has(> .live-feed-filter-pills[style*="none"]) { display: none; }

/* the search box fills the feed column, as the Townsquare's search/filter row does */
.lf-feed-lay .feed-search-widget { max-width: none; }

/* the pill row's arrows sit in the row, at its ends (backend-feed.css puts them above the row, beside
   the search box), and only the one with somewhere to go shows */
.lf-feed-lay .bf-pills { padding-top: 0; }
.lf-feed-lay .bf-arrow { top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border-radius: 50%; }
.lf-feed-lay .bf-arrow-l { left: 6px; right: auto; }
.lf-feed-lay .bf-arrow-r { right: 6px; left: auto; }
.lf-feed-lay .bf-pills:is(.bf-more-l, .bf-more-r) .bf-arrow[hidden] { display: none !important; }

/* a card with nothing to list (Upcoming events always shows): one quiet line */
.tq-feed-side .tq-side-empty { margin: 0; padding: 2px 6px 4px; font-size: 14px; line-height: 1.5; color: var(--tq-muted); }
.tq-feed-side .tq-side-empty a { color: var(--tq-blue); font-weight: 700; }
.tq-feed-side .tq-side-empty a:hover { text-decoration: underline; }

/* trending and the other lists: a title runs to two lines at most */
.tq-feed-side .tq-mini b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tq-feed-side .tq-mini a.tq-solo b { display: block; }
@media (min-width: 1081px) {
  .lf-feed-lay .sliderrr_spot > .col-md-4 { flex: 0 0 50%; max-width: 50%; }
}